<template>
  <div>
    <el-row>
      <el-col :span="18">
        <el-input suffix-icon="el-icon-search" placeholder="搜索 hashKey " v-model="input.pattern"
                  @keyup.enter.native="scanHashKey" size="small"/>
      </el-col>
      <el-col :span="5">
        <el-button size="small" >选中删除</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="scanResult"
      border
      stripe
      style="width: 100%"
      height="300"
      size="mini"
      ref="hashKeyScanTable"
      highlight-current-row
    >
      <el-table-column
        type="index"
        width="50"/>
      <el-table-column type="selection" width="55" />
      <el-table-column prop="field" label="field" />
      <el-table-column prop="value" label="value" />
      <el-table-column
        fixed="right"
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="dropFields(scope.row.field)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button-group>
      <el-button plain size="mini" icon="el-icon-coordinate" @click="resetScanHashKey">重置</el-button>
      <el-button plain size="mini" :disabled="hashKeyScanResult.finish"  icon="el-icon-arrow-right" @click="scanHashKeyNextPage">下一页</el-button>
    </el-button-group>
    cursor: {{hashKeyScanResult.cursor}}
  </div>
</template>

<script>
import redis from "@/api/redis";
import clip from "@/utils/clipboard";

export default {
  name: "hash",
  props: {
    keyObj: {
      type: Object,
      required: true
    },
    connParam:{
      type: Object,
      required: true
    },
    serializerParam: {
      type: Object,
      required: true
    }
  },
  data(){
    return {
      loading: false,
      hashKeyScanResult: {
        data:{},
        fields: [],
        cursor: 0
      },
      input: {
        all: false,
        fields: [],
        pattern: '*',
        limit: 20,
        cursor: 0
      }
    }
  },
  methods: {
    getData(){
      return this.hashKeyScanResult.data;
    },
    loadData(){
      this.resetScanHashKey();
    },
    scanHashKey(){
      this.loading = true;
      Object.assign(this.input,{key:this.keyObj.key});
      redis.hscan(this.connParam,this.input,this.serializerParam).then(res => {
        this.loading = false;
        this.hashKeyScanResult = res.data;
      }).catch(res => {
        this.loading = false;
      })
    },
    scanHashKeyNextPage(){
      this.input.cursor = this.hashKeyScanResult.cursor;
      this.scanHashKey();
    },
    resetScanHashKey(){
      Object.assign(this.input,{pattern:'*',cursor:'0',limit:20})
      this.scanHashKey();
    },
    dropFields(fields){
      if (fields && typeof fields === 'string') {
        this.$confirm('确定删除 ' + fields + ' 此操作不可逆?', '警告', { type: 'warning' }).then(() => {
          redis.delFields(this.keyObj.key,[fields],this.serializerParam).then(res => {
            this.scanHashKey();
          })
        }).catch(() => {
        })
      } else if (fields) {
        this.$confirm('再次确认,将删除' + fields.length + '个 field 此操作不可逆?', '警告', { type: 'warning' }).then(() => {
          redis.delFields(this.keyObj.key,fields,this.serializerParam).then(res => {
            this.scanHashKey();
          })
        }).catch(() => {
        })
      }
    },
  },
  computed: {
    scanResult(){
      let hashScanResult = this.hashKeyScanResult;
      if (hashScanResult.data){
        let values = [];
        for(let field in hashScanResult.data){
          values.push({field:field,value:hashScanResult.data[field]})
        }
        return values;
      }
      return [];
    }
  }
}
</script>

<style scoped>

</style>
